<template>
  <div class='container'>
    <el-row>
      <el-col :span='24'>
        <el-card>
          <div class="business-tabs">
            <el-tabs v-model="tabsName" @tab-click="handleClick">
              <el-tab-pane label="待审核" name="-3"></el-tab-pane>
              <el-tab-pane label="冻结中" name="-6"></el-tab-pane>
              <el-tab-pane label="审核驳回" name="-4"></el-tab-pane>
            </el-tabs>
          </div>

          <div slot="header">
            <bread></bread>
          </div>

          <div class="business-table">
            <el-row>
              <el-form class="form" label-width="100px" :model="searchParams">
                <el-col :span="8">
                  <el-form-item label="商家名称">
                    <el-input v-model="searchParams.shopName" size="mini" placeholder="请输入商家简称"></el-input>
                  </el-form-item>
                  <el-form-item label="所属行业">
                    <el-select @change="getTradeList($event)" v-model="tradeValue" placeholder="请选择" style="width:100%">
                      <el-option
                        v-for="item in tradeList"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                        <span style="float: left">{{ item.title }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="商家编号">
                    <el-input v-model="searchParams.shopCode" size="mini"
                              placeholder="请输入商家编号"></el-input>
                  </el-form-item>
                  <el-form-item label="联系电话">
                    <el-input v-model="searchParams.mobile" size="mini"
                              placeholder="请输入联系电话"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item></el-form-item>
                  <el-form-item>
                    <el-button @click="submitSearch()">搜索</el-button>
                    <el-button @click="clearListSearch">重置</el-button>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>

            <div class="table-wrapper">
              <el-table
                :data="businessList"
                style="width: 100%"
                align='center'
                :header-cell-style="{background:'#eef1f6'}"
                @selection-change="handleSelectionChange"
              >

                <el-table-column
                  type="selection"
                  align='center'
                  width="50">
                </el-table-column>
                <el-table-column
                  prop="shopCode"
                  label="商家编号"
                  align='center'
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="shopName"
                  label="商家名称"
                  align='center'
                  width="150"
                >
                </el-table-column>
                <el-table-column
                  prop="shopClassify"
                  label="所属行业"
                  align='center'
                  width="120">
                </el-table-column>
                <el-table-column
                  label="所属城市"
                  align='center'
                >
                  <template slot-scope="scope">
                    {{scope.row.province}}{{scope.row.city}}{{scope.row.county}}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="serviceTel"
                  label="联系电话"
                  align='center'
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="scale"
                  label="分配比例"
                  align='center'
                  width="80">
                </el-table-column>
                <el-table-column
                  prop="pensionScale"
                  label="养老金分配比例"
                  align='center'
                  width="100">
                </el-table-column>
                <el-table-column
                  align='center'
                  label="操作"
                  width="180">
                  <template slot-scope='scope'>
                    <el-button
                      type="text"
                      size="mini"
                      @click='onEdit(scope.$index, scope.row)'
                    >
                      <!--              <router-link tag="span" to="">编辑信息</router-link>-->
                      编辑信息
                    </el-button>
                    <el-button
                      type="text"
                      size="mini"
                      @click='onCheck(scope.$index, scope.row)'
                    >
                      <!--              <router-link tag="span" to="businessLook">查看商家</router-link>-->
                      查看商家
                    </el-button>
                    <el-button type="text"
                               size="mini" @click="onReject(-4,scope.row)"
                               v-if="tabsName == -3">审核驳回
                    </el-button>
                    <el-button
                      v-if="tabsName == -4"
                      type="text"
                      size="mini"
                      @click='onRejectReason(scope.$index, scope.row)'
                    >
                      驳回反馈
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

              <div class="table-footer">
                <el-row>
                  <el-col>
                    <el-button @click="showDialog(-6)" size="small"
                               v-if="tabsName == -3">
                      冻结商家
                    </el-button>
                    <el-button @click="showDialog(0)" size="small"
                               v-if="tabsName == -3">审核通过
                    </el-button>
                    <el-button @click="showDialog(0)" size="small"
                               v-if="tabsName == -6">解除冻结
                    </el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>

          <div class="pagination">
            <pagination :pageTotal="pageTotal" @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></pagination>
          </div>

        </el-card>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="dialogFormVisible" :modal-append-to-body="false">
      <el-form :model="rejectParams">
        <el-row>
          <el-col>
            <el-col :span="16">
              <!--                      <el-form-item label="操作">-->
              <!--                        <el-button type="danger">驳回</el-button>-->
              <!--                        <el-button type="primary">审核通过</el-button>-->
              <!--                      </el-form-item>-->

              <el-form-item label="驳回理由" v-if="checkBusiness.type != -6">
                <el-select v-model="rejectValue" @change="getReject($event)" placeholder="请选择"
                           style="width:100%">
                  <el-option
                    v-for="item in rejectSelect"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                    <span style="float: left">{{ item.label }}</span>
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="具体描述">
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="请输入"
                  v-model="checkBusiness.des"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-button type="primary" v-if="checkBusiness.type == -6" @click="getCheckBusiness()">提交</el-button>
              <el-button type="primary" v-if="checkBusiness.type == -4 || checkBusiness.type == -5"
                         @click="getCheckReject()">提交
              </el-button>
            </el-col>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <!-- 审核驳回原因提示框 -->
    <el-dialog :visible.sync="reasonVisible" :modal-append-to-body="false">
      <el-row>
        <el-col>
          驳回理由：{{refushReason}}
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import pagination from '../../common/pagination'
import bread from '../../common/bread'
import { formatDate } from 'src/utils/utils'
import { businessList, checkBusiness, industryList } from '../../api/api'
import { MessageBox } from 'element-ui'

const POSITIVE = 0
const NEGATIVE = 1

export default {
  data () {
    return {
      dialogFormVisible: false,
      businessList: [],
      tabsName: '-3',
      loading: true,
      incomePayData: {
        type: '',
        pageNum: 1,
        pageSize: 10,
        userId: sessionStorage.getItem('userId')
      },
      pageTotal: 0,
      checkBusiness: {
        type: '0',
        userId: sessionStorage.getItem('userId'),
        des: ''
      },
      tradeList: [],
      tradeValue: '',
      rejectValue: '',
      rejectSelect: [{
        value: '-4',
        label: '基本信息有误'
      }, {
        value: '-5',
        label: '资质信息有误'
      }],
      value: '',
      searchParams: {
        mobile: '',
        shopName: '',
        classifyId: '',
        shopCode: '',
        userId: sessionStorage.getItem('userId')
      },
      rejectParams: {},
      multipleSelection: [],
      frozenList: [],
      editForm: [],
      reasonVisible: false,
      refushReason: ''
    }
  },
  created () {
    // var that = this
    // that.$root.eventHub.$on('eventName', function(val) {
    //   that.tabsName = val
    //   that.getTableData(that.tabsName)
    // })
  },
  mounted () {
    this.getTableData()
    this.getTradeList()
  },
  methods: {
    // 显示编辑界面
    onEdit (index, row) {
      this.editForm = Object.assign({}, row)
      this.$router.push({ name: 'businessEdit', params: { formData: this.editForm } })
    },
    onCheck (index, row) {
      this.editForm = Object.assign({}, row)
      this.$router.push({ name: 'businessLook', params: { formData: this.editForm } })
    },
    // 获取列表数据 num(下同):取的挪车的原型 1-默认请求类型三方ID
    // 网点名称 storeName ID cardId
    submitSearch () {
      this.getTableData()
    },
    // 格式化表单数据
    clearForm () {
      this.searchParams = {
        mobile: '',
        shopName: '',
        classifyId: '',
        shopCode: '',
        userId: sessionStorage.getItem('userId')
      }
    },
    // 清除列表的搜索表单
    clearListSearch () {
      this.clearForm()
    },
    showDialog (type, row) {
      this.checkBusiness.type = type
      if (this.multipleSelection.length === 0) {
        MessageBox.alert('至少选择一项', '提示', {
          confirmButtonText: '确定',
          showClose: false,
          type: 'error'
        })
      } else if (type === 0) {
        this.getCheckBusiness()
      } else {
        this.dialogFormVisible = true
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    show (scope) {
      console.log(scope)
    },
    onReject (type, row) {
      this.checkBusiness.type = type
      this.dialogFormVisible = true
      this.frozenList = row.shopId
      console.log(this.frozenList)
    },
    onRejectReason (index, row) {
      console.log(row)
      this.refushReason = row.des
      this.reasonVisible = true
    },
    getReject (rejectType) {
      let obj = {}
      obj = this.rejectSelect.find((item) => { // 这里的userList就是上面遍历的数据源
        return item.value === rejectType // 筛选出匹配数据
      })
      this.checkBusiness.type = rejectType
    },
    getCheckReject () {
      if (this.rejectValue === '' || this.checkBusiness.des === '') {
        MessageBox.alert('内容不能为空', '提示', {
          confirmButtonText: '确定',
          showClose: false,
          type: 'error'
        })
        this.dialogFormVisible = false
      } else {
        this.audit()
      }
    },
    getCheckBusiness () {
      const length = this.multipleSelection.length
      // 转换shopIDS 数组为字符串
      this.frozenList = []
      for (let i = 0; i < length; i++) {
        this.frozenList.push(this.multipleSelection[i].shopId)
      }
      this.frozenList = this.frozenList.join(',')
      this.audit()
    },
    audit () {
      const para = Object.assign({}, this.checkBusiness, {
        shopIds: this.frozenList
      })
      console.log(para)
      checkBusiness(para).then(res => {
        console.log(res)
        this.getTableData()
        this.$toast(res.msg)
        this.dialogFormVisible = false
      })
    },
    // 表格数据
    getTableData (type) {
      this.businessList = []
      this.incomePayData.type = this.tabsName
      console.log(this.incomePayData.type)
      const para = Object.assign({}, this.incomePayData)
      businessList(para).then(res => {
        console.log(res)

        this.businessList = res.data.list
        this.pageTotal = res.data.total
      })
    },
    // 上下分页
    handleCurrentChange (val) {
      this.incomePayData.pageNum = val
      this.getTableData()
    },
    // 每页显示多少条
    handleSizeChange (val) {
      this.incomePayData.pageSize = val
      this.getTableData()
    },
    // 行业接口
    getTradeList () {
      const para = Object.assign({})
      industryList(para).then(res => {
        this.tradeList = res.data
        console.log(this.tradeList)
      })
    },
    addRowClass ({ row, rowIndex }) {
      if (row.rateType === NEGATIVE) {
        return 'warning-row'
      }
    },
    handleClick () {
      this.clearForm()
      this.incomePayData.type = this.tabsName
      console.log(this.incomePayData.type)
      this.getTableData()
    }
  },
  filters: {
    rateTypeToText (rateType) {
      return rateType === POSITIVE ? '满意' : '不满意'
    },
    formatDate (time) {
      let date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  components: {
    pagination,
    bread
  }
}
</script>
<style lang='scss'>
  .business-tabs {
    margin: 0 0 10px 0;
  }

  .el-dialog--small {
    width: 600px !important;
  }

  .container {
    .el-table {
      .warning-row {
        background-color: oldlace;
      }
    }

    .recommend-tag {
      display: inline-block;
      margin: 4px 0;
      margin-right: 4px;

      &:last-child {
        margin-right: 0;
      }
    }

    .table-footer {
      padding: 10px;
      background: #eef1f6;
    }
  }
</style>
